<template>
	<view class="bargain_goods_box">
	    <view class="bargain_goods_bg"></view>
	    <view class="bargain_goods_desktop"></view>
	    <view class="bargain_goods_list_box">
	        <view class="bargain_goods_item" v-for="(item,index) of list" :key="index"  @click="onPageJump(item)">
                <view class="name">{{ item.name }}</view>
	            <image :src="item.img" mode="aspectFill"></image>
                <view class="people">
                    <text>{{item.needCutCount}}刀砍完</text>
                    <!-- <view></view>
                    <text>99人正在砍价</text -->
                </view>
	            <button class="goods_btn">最低{{item.cutMinPrice}} 立即参与</button>
	        </view>
	    </view>
	    <view class="desktop_left"></view>
	    <view class="desktop_right"></view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
		},
        created() {
            console.log(this.list);
        },
		methods: {
			onPageJump(item) {
				uni.navigateTo({
					url: "/pages/home/shop/goodsDetail?objId=" + item.objId
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.bargain_goods_box {
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding-bottom: 60rpx;
	    height: 556rpx;
	    width: 100%;
	
	    .desktop_left {
	        position: absolute;
	        top: 0;
	        bottom: 0;
	        left: 35rpx;
	        width: 17rpx;
	        background-color: $themeColor;
	    }
	
	    .desktop_right {
	        position: absolute;
	        top: 0;
	        bottom: 0;
	        right: 35rpx;
	        width: 17rpx;
	        background-color: $themeColor;
	    }
	
	    .bargain_goods_bg {
	        background-image: linear-gradient(0deg, $viceColor 0%,  #ffffff 100%);
	        border-radius: 20rpx 20rpx 0rpx 0rpx;
	        flex: 1;
	        width: 646rpx;
	        z-index: 2;
	    }
	
	    .bargain_goods_desktop {
	        position: absolute;
	        bottom: 0;
	        left: 20rpx;
	        width: 710rpx;
	        height: 60rpx;
	        flex-shrink: 0;
	        z-index: 2;
	        @include bis("../../../static/icon/theme/ic_base.png");
	    }
        .bargain_goods_list_box {
            position: absolute;
            top: 0;
            left: 35rpx;
            right: 35rpx;
            bottom: 0;
            z-index: 3;
            padding: 24rpx 40rpx 40rpx 40rpx;
            display: flex;
            justify-content: space-between;
            .bargain_goods_item {
                width: 287rpx;
            	.name {
            	    font-size: 28rpx;
            	    color: #333333;
                    width: 287rpx;
                    @include toe();
            	}
                image {
                    margin-top: 24rpx;
                    width: 287rpx;
                    height: 287rpx;
                }
            	.people {
            	    display: flex;
            	    align-items: center;
            	    font-size: 24rpx;
            	    color: $themeColor;
            	    margin-top: 32rpx;
            	            	
            	    text {
            	        &:nth-child(2) {
            	            margin-left: 30rpx;
            	        }
            	    }
            	}
                .goods_btn {
                    width: 100%;
                    height: 62rpx;
                    line-height: 62rpx;
                    border-radius: 32rpx;
                    background-color: $themeColor;
                    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(123, 0, 0, 0.2);
                    font-size: 24rpx;
                    color: #ffffff;
                    border: solid 2rpx #ffffff;
                    margin-top: 24rpx;
                }
            }
        }
	}
</style>
